#{extends 'main.html' /}
*{
   创建文件夹
   1.如果存在那么name(1) name(2)
   2.个人文件夹不得超过500M
}*

<div class="col-md-12">
    <button type="button" onclick="folders()" class="btn btn-primary">新建文件夹</button>
    <a class="btn btn-primary " data-toggle="modal" href='#modal-id'>新建画布</a>
    <ul class="folder">
       #{list list,as:'list'}
        <li class="item file-item" style="width: 142.67px; height: 154px;margin-left:0px;">
            <div class="box j-foldItem">
                <a href="javascript:;" class="j-openFolder" draggable="false" style="background: #fff;">
                    <svg class="svg1" x="0px" y="0px" width="100%" viewBox="0 0 148.976 113.947" enable-background="new 0 0 148.976 113.947" xml:space="preserve"><path fill="#00A2EB" d="M148.976,17.373c0-3.625-2.939-6.564-6.564-6.564H54.04c0,0-4.489-8.163-6.152-9.586C46.88,0.36,45.741,0,43.714,0C40.626,0,6.565,0,6.565,0C2.939,0,0,2.939,0,6.565v107.382h148.976V17.373z"></path></svg>
                </a>
                <div class="box-info"><div class="title">
                    <a href="javascript:;" class="titles" onclick="demo(0)">${list.folderName}</a></div>
                    <div class="edit-mode"><span class="lnr lnr-pencil" style="margin-left: 15px;"></span></div>
                </div>
            </div>
        </li>
        #{/list}
    </ul>
    <div>
    *{${name}${msg}}*
    </div>

    <div class="modal fade" id="modal-id">
        <div class="modal-dialog" style="width: 800px;margin: 0px auto;margin-top: 150px;">
            <div class="modal-content">
               <ul>
                  #{list systemDesignList, as:'systemDesignList'}
                        <li class="systemDesignList">
                            <a href="javascript:void(0)" onclick="clicks(${systemDesignList.ImageWidth},${systemDesignList.ImageHeght})">
                                <span class="glyphicons glyphicons-pictures" style=" width: 100px;height:40px;"></span>
                                <div>${systemDesignList.ImageNames}</div>
                                <div>${systemDesignList.ImageWidth}x${systemDesignList.ImageHeght}${systemDesignList.ImageCompany}</div>
                            </a>
                        </li>
                    #{/list}
               </ul>
                <div class="right">
                    <div>
                        <span>请输入内容：</span>
                       <div> <input type="text" id="name"></div>
                    </div>
                    <div>
                        <span>
                            宽
                        </span>
                        <div>
                            <input type="text" id="x2">
                        </div>
                        <span>
                            高
                        </span>
                        <div>
                            <input type="text" id="y2">
                        </div>
                    </div>
                   <div>
                       <div>
                           <input type="button" value="确定" onclick="submits()">
                       </div>
                       <div>
                           <input type="button"  value="取消">
                       </div>
                   </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    function clicks(x,y){
       var x1= x;
       var y1 =y;
        document.getElementById("x2").value=x;
        document.getElementById("y2").value=y;
    }
    function submits(){
       var x =  document.getElementById("x2").value;
       var y =  document.getElementById("y2").value;
       var name =  document.getElementById("name").value;
       if(x == ""||x==null){
            alert("宽不得为空！");
             return false;
       }
       if(y == ""||y==null){
             alert("高不得为空！");
              return false;
       }
       if(name == ""||name==null){
            alert("文件不得为空！");
             return false;
       }
       alert(x+""+y+""+name)
    }
    var folder = 1;
    var folder_1 = $(".folder");
    var names ="";
    var input  ="<input type=\"text\" id='folderName' value=''>";
    function folders() {
        var number = folder_1.children().length;
        if(number<10){
            var folder_content = "<li class=\"item file-item\"\n" +
                    "    style=\"width: 142.67px; height: 154px;margin-left:0px;\">\n" +
                    "    <div class=\"box j-foldItem\">\n" +
                    "        <a href=\"javascript:;\" class=\"j-openFolder\" draggable=\"false\" style=\"background: #fff;\">\n" +
                    "            <svg class=\"svg1\" x=\"0px\" y=\"0px\" width=\"100%\" viewBox=\"0 0 148.976 113.947\" enable-background=\"new 0 0 148.976 113.947\" xml:space=\"preserve\"><path fill=\"#00A2EB\" d=\"M148.976,17.373c0-3.625-2.939-6.564-6.564-6.564H54.04c0,0-4.489-8.163-6.152-9.586C46.88,0.36,45.741,0,43.714,0C40.626,0,6.565,0,6.565,0C2.939,0,0,2.939,0,6.565v107.382h148.976V17.373z\"></path></svg>\n" +
                    "        </a>\n" +
                    "        <div class=\"box-info\"><div class=\"title\" >    <a href=\"javascript:;\" class='titles'>${name}</a></div>\n" +
                    "            <div class=\"edit-mode\"><span class=\"lnr lnr-pencil\" style=\"margin-left: 15px;\"></span></div>\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "</li>";
            if (number == 0) {
                folder_1.append(folder_content);
                 $.ajax({
                     type: "GET",
                     url: "/folder",
                    data:{name:'${name}'},
                     dataType: "json",
                     success: function(data){
                        if(data==1){
                             alert("添加成功")
                             $(".title").html(data.fileNmae);
                        }else{
                        alert("添加失败")
                        }
                    }
             });
                $(".titles").attr("onclick","demo(0)");
            } else {

                folder_1.append(folder_content);
                var a = $(".title").html();

               $($(".titles")[number]).html("${name}"+"("+(i+1)+")");
                    $($(".titles")[number]).attr("onclick","demo("+(i+1)+")");
                      MyFolder("${name}"+"("+(number+1)+")");
            }
        }else{
            alert("个人文件不得超过十个！");
        }
    }
    function demo(i) {
        var a = $(".title").html();
        var a_1=$(".titles").html();

        if($.isEmptyObject(a)){
            return false;
        }else{

            $($(".titles")[i]).html(input);
            $("#folderName").blur(function(){
                var folderNameVal = $("#folderName").val();

                $($(".title")[i]).html(a);
                $($(".titles")[i]).html(folderNameVal);
            })
        }

    }
    function MyFolder(names){

         $.ajax({
                 type: "GET",
                 url: "/folder",
                 data:{name:names},
                 dataType: "json",
                 success: function(data){
                    if(data==1){
                         alert("添加成功")

                    }else{
                    alert("添加失败")
                    }
                }
         });
    }

</script>
<style>
.right{
  padding:20px;
    float: left;
    width: 30%;
    background: #fff;
    border-radius: 10px;
}
    .modal-content{
        width: 800px;
        background: #e8e8e8;
        height: 410px;
        padding: 26px;
    }
    .systemDesignList {
    width: 40%;
    float: left;
    padding: 20px;
    margin-left: 5%;
    margin: 20px;
    background: #000000;
    text-align: center;
}
    .modal-content ul{
        padding: 0px;
        width: 70%;
        float: left;
    }

    .folder {
        margin: 0px;
        padding: 0px;
        width: 100%;
        margin-top: 50px;
    }

    .folder li {
        float: left;
        margin-right: 2%;
    }

    .box-info {
        background: #fff;
        padding: 5px;
        margin-top: -2px;
    }

    .title {
        width: 70%;
        float: left;
    }
    #folderName{
        width: 100%;
        height: 20px;
    }
    .modal-content ul{
        padding: 0px;
    }
</style>
